<template>
	<view class="search_sel_page">
		
		<view class="pr24">
			<view class="search_en_box flex_box aic">
				<view class="re item ov">
					<image src="@/static/images/icon_search.png" class="search_img"></image>
					<input type="text" class="left_ipt" placeholder="请输入您想要搜索的问题" />
				</view>
				<view class="search_btn">搜索</view>
			</view>
		</view>
		
		
		<view class="sel_tab_h flex_box">
			
			<view class="left_tab_scroll">
				<view class="item_tab_box">
					<view class="item_tab_bg active">主机</view>
				</view>
				<view class="item_tab_box">
					<view class="item_tab_bg">账号</view>
				</view>
				<view class="item_tab_box">
					<view class="item_tab_bg">购买</view>
				</view>
			</view>
			
			<view class="item ov">
				<view class="tab_content_h">
					<view class="item_content_h">
						<view class="mt48 fs28 cor_333" v-for="(item, index) in 20">SWITCH各版本有什么区别?</view>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	
	.search_sel_page {
		position: relative;
		min-height: 100vh;
		padding: 24rpx 0 24rpx 24rpx;
		background: linear-gradient(90deg, #FFEEEE 0%, #FFFFFF 90.99%);
		.search_en_box {
			position: relative;
			border-radius: 16rpx;
			overflow: hidden;
			.search_img {
				position: absolute;
				top: 50%;
				left: 24rpx;
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
				margin-top: -16rpx;
			}
			.left_ipt {
				position: relative;
				display: inline-block;
				width: 100%;
				height: 84rpx;
				line-height: 80rpx;
				font-size: 24rpx;
				color: #333;
				padding: 0 24rpx 0 64rpx;
				border: 2rpx solid #F0AAB5;
				border-radius: 16rpx 0 0 16rpx;
				outline: none;
				vertical-align: top;
			}
			.search_btn {
				position: relative;
				width: 166rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				font-size: 24rpx;
				color: #fff;
				background: #F5220F;
				border-radius: 0 16rpx 16rpx 0;
			}
		}
		.sel_tab_h {
			position: relative;
			height: calc(100vh - 228rpx);
			margin-top: 24rpx;
			.left_tab_scroll {
				position: relative;
				height: 100%;
				overflow-y: auto;
				margin-right: 24rpx;
				.item_tab_box {
					position: relative;
					padding: 24rpx 0;
					.item_tab_bg {
						position: relative;
						width: 118rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						&.active {
							color: #fff;
							background: url(@/static/images/icon_btn_bg_1.png) no-repeat;
							background-size: 118rpx;
						}
					}
				}
			}
			.tab_content_h {
				position: relative;
				height: 100%;
				padding: 24rpx 40rpx;
				background: #fff;
				border-radius: 24rpx 0 0 24rpx;
				.item_content_h {
					position: relative;
					height: 100%;
					overflow-y: auto;
				}
			}
		}
	}

</style>
